<template>
  <div>
    姓名:<input V-model="userName" /> {{ userName }}<br />
    薪水:<input type="number" v-model="salary" /> {{ salary }}<br />
    <button v-on:click="addSalary">提交</button>
    <button @click="changeUserInfo">查看个⼈信息</button>
  </div>
  <!-- 水平分割线 -->
  <hr />
  <div class="userInfo" v-if="showUserInfo">
    <h2>个⼈信息</h2>
    年龄：<input type="number" v-model="userInfo.age" /><br />
    性别：<input type="radio" value="1" v-model="userInfo.sex">男
       <input type="radio" value="2" v-model="userInfo.sex">⼥<br />
    岗位：<select v-model="userInfo.department">
      <option value="dev">开发</option>
      <option value="test">测试</option>
      <option value="maintain">运维</option>
    </select><br/>

    技术: <span v-for="skill in userInfo.skills" :key="skill">{{ skill }}</span><br />
    学习新技术： <input v-model="newSkill" /> <button @click="learnSkill">学习</button><br />
    个⼈信息汇总：{{ userInfo }}

  </div>

</template>

<script lang="ts">
export default {
  data() {
    return {
      userName: 'roy',
      salary: 15000,
      userInfo: {
        age: 0,
        sex: 1,
        skills: ['java', 'vue', 'python'],
        department: ''
      },
      newSkill: '',
      showUserInfo: false
    }
  },
  methods: {
    addSalary() {
      this.salary += 1000
    },
    learnSkill() {
      if (this.newSkill)
        this.userInfo.skills.push(this.newSkill)
    },
    changeUserInfo() {
      this.showUserInfo = !this.showUserInfo
    }
  }
}

</script>
<style scoped>
.userInfo {
  background-color: bisque;
  width: 80%;
}

.userInfo span {
  background-color: yellow;
  margin-left: 10px;
  border: 1px;
  border-radius: 5px;
}

</style>
